import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
import {useStyles} from './styles.js'
import TextField from '@material-ui/core/TextField';
import { useState } from 'react';

const styles = {
  list: {
    width: 250,
  },
  fullList: {
    width: 'auto',
  },
  account: {
    marginLeft: "auto",
    display: "flex",
    alignItems: "center",
    
  },
  button: {
    color: 'white'
  },
  field: {
    marginTop: 20,
    marginBottom: 20,
    display: 'block'
}
};

class TemporaryDrawer extends React.Component {
  state = {
    right: false,
  };
  
  toggleDrawer = (side, open) => () => {
    this.setState({
      [side]: open,
    });
  };
  // state = {
  //     title: '222',
  //     // setTitle: '',
  //   };
  inputchange = (e) =>{
    // console.log("123",e)
    this.setState({
      title:e.target.value
    })
    console.log(this.title)
  }

  render() {
    const { classes } = this.props;
    
    const handleSubmit = (e) => {
        e.preventDefault()

        if(this.title){
            console.log(this.title)
        }
    }


    const sideList = (
      <div className={classes.list}>
        
       <form noValidate autoComplete='off' onSubmit={handleSubmit}>
        <TextField
        onChange={
        //   (e) => this.setState({
        //   title:e.target.value
        // })
        this.inputchange
       }
        className={classes.field}
        label = "助记词"
        variant='outlined'
        color='secondary'
        fullWidth
        required
        />
        <Button 
        onClick={() => console.log('you clicked me')}
        type="submit"
        color='secondary'
        variant='contained'>
            提交
        </Button>

            
       </form>
      </div>
    );

    return (
        
      <div className={classes.account}>
        <Button variant="contained" color="primary" onClick={this.toggleDrawer('right', true)} startIcon={ <AccountBalanceWalletIcon titleAccess="Wallet Address" className={classes.walletIcon}/>}>{this.props.addr}</Button>
        <Drawer anchor="right" open={this.state.right} onClose={this.toggleDrawer('right', false)}>
          <div
            tabIndex={0}
            role="button"
            // onClick={this.toggleDrawer('right', false)}
            //onKeyDown={this.toggleDrawer('right', false)}
          >
            {sideList}
          </div>
        </Drawer>
      </div>
    );
  }
}

TemporaryDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TemporaryDrawer);